<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Swipeout Vue Component | Framework7 Vue Documentation</title>
    <meta property="og:image" content="http://framework7.io/i/f7-banner.jpg">
    <meta name="viewport" content="width=device-width, viewport-fit=cover">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@framework7io">
    <meta name="twitter:creator" content="@framework7io">
    <meta name="twitter:title" content="Swipeout Vue Component | Framework7 Vue Documentation">
    <meta name="twitter:image" content="https://avatars0.githubusercontent.com/u/31954178?s=200&amp;v=4">
    <link rel="stylesheet" href="/framework7-v3/css/normalize.css">
    <link rel="stylesheet" href="/framework7-v3/css/main.css">
    <link rel="shortcut icon" href="/framework7-v3/i/favicon.png">
    <script src="/framework7-v3/js/modernizr-2.7.1.min.js"></script>
  </head>
  <body class="body-docs">
    <header class="internal-header">
      <div class="center">
        <div class="logo-holder"><a class="logo" href="/framework7-v3/"></a></div>
        <div class="header-content">
          <div class="title">Framework7
            <div class="version">v3.6.7</div>
          </div>
          <ul class="nav">
            <li><a href="/framework7-v3/docs/">Docs</a>
              <ul>
                <li><a href="/framework7-v3/docs/introduction.html">Getting Started</a></li>
                <li><a href="/framework7-v3/docs/">Framework7 Core / API</a></li>
                <li><a href="/framework7-v3/vue/">Framework7 Vue</a></li>
                <li><a href="/framework7-v3/react/">Framework7 React</a></li>
                <li><a href="https://framework7.io/icons/" target="_blank">Framework7 Icons</a></li>
                <li><a href="/framework7-v3/docs/dom7.html">Dom7</a></li>
                <li><a href="http://idangero.us/template7/" target="_blank">Template7</a></li>
              </ul>
            </li>
            <li><a href="#">Resources</a>
              <ul>
                <li><a href="http://forum.framework7.io" target="_blank">Community Forum</a></li>
                <li><a href="https://framework7.io/tutorials/" target="_blank">Tutorials</a></li>
                <li><a href="https://framework7.io/templates/" target="_blank">Templates</a></li>
                <li><a href="https://framework7.io/plugins/" target="_blank">Plugins</a></li>
                <li><a href="https://framework7.io/showcase/" target="_blank">Apps Showcase</a></li>
                <li><a href="https://jobs.framework7.io" target="_blank">Jobs & Developers</a></li>
              </ul>
            </li>
            <li><a href="http://blog.framework7.io" target="_blank">Blog</a></li>
            <li><a href="https://framework7.io/contribute/" target="_blank">Contribute</a></li>
          </ul>
          <div class="patreon-github"><a class="patreon-button" href="https://www.patreon.com/vladimirkharlampidi" target="_blank"><span class="patreon-logo"></span><span class="patreon-text">Support Framework7</span></a>
            <div class="github-buttons"><a href="https://github.com/framework7io/framework7/" target="_blank"><img src="/framework7-v3/i/gh-logo.png"></a><a class="gh-stars" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> stars</a><a class="gh-forks" href="https://github.com/framework7io/framework7/" target="_blank"><span></span> forks</a></div>
          </div>
        </div>
      </div>
    </header>
    <div class="bsa-cpc"></div>
    <main>
      <div class="center">
        <div class="docs-demo-device docs-demo-device-ios">
          <div class="docs-demo-device-buttons"><a class="active" data-theme="ios">iOS</a><a data-theme="md">Android</a></div>
          <div class="docs-demo-device-iframe">
            <iframe width="320" height="548" frameborder="0" scrolling="on"></iframe>
            <div class="fade-overlay"></div>
          </div>
          <div class="docs-demo-device-android-buttons">
            <div class="triangle"></div>
            <div class="circle"></div>
            <div class="square"></div>
          </div>
        </div>
        <div class="docs-nav">
          <div class="docs-nav-toggle"><span></span><span></span><span></span></div>
          <ul>
            <li>
              <div class="title">Get Started</div>
              <ul>
                <li><a href="introduction.html">Introduction</a></li>
                <li><a href="kitchen-sink.html">Kitchen Sink</a></li>
                <li><a href="installation.html">Installation</a></li>
                <li><a href="app-layout.html">App Layout</a></li>
                <li><a href="init-app.html">Initialize App</a></li>
                <li><a href="vue-component-extensions.html">Vue Component Extensions</a></li>
                <li><a href="navigation-router.html">Navigation / Router</a></li>
                <li><a href="colors.html">Color Properties</a></li>
              </ul>
            </li>
            <li>
              <div class="title">Vue Components</div>
              <ul>
                <li><a href="app.html">App</a></li>
                <li><a href="accordion.html">Accordion</a></li>
                <li><a href="action-sheet.html">Action Sheet / Actions</a></li>
                <li><a href="badge.html">Badge</a></li>
                <li><a href="block.html">Block / Content Block</a></li>
                <li><a href="button.html">Button</a></li>
                <li><a href="cards.html">Cards</a></li>
                <li><a href="checkbox.html">Checkbox</a></li>
                <li><a href="chips.html">Chips / Tags</a></li>
                <li><a href="contacts-list.html">Contacts List</a></li>
                <li><a href="floating-action-button.html">Floating Action Button / FAB</a></li>
                <li><a href="gauge.html">Gauge</a></li>
                <li><a href="grid.html">Grid / Layout Grid</a></li>
                <li><a href="icon.html">Icon</a></li>
                <li><a href="inputs.html">Inputs / Form Inputs</a></li>
                <li><a href="link.html">Link</a></li>
                <li><a href="list-view.html">List View</a></li>
                <li><a href="list-item.html">List Item</a></li>
                <li><a href="list-button.html">List Button</a></li>
                <li><a href="list-index.html">List Index</a></li>
                <li><a href="login-screen.html">Login Screen</a></li>
                <li><a href="messagebar.html">Messagebar</a></li>
                <li><a href="messages.html">Messages</a></li>
                <li><a href="navbar.html">Navbar</a></li>
                <li><a href="page.html">Page</a></li>
                <li><a href="panel.html">Panel / Side Panels</a></li>
                <li><a href="photo-browser.html">Photo Browser</a></li>
                <li><a href="popover.html">Popover</a></li>
                <li><a href="popup.html">Popup</a></li>
                <li><a href="preloader.html">Preloader</a></li>
                <li><a href="progressbar.html">Progressbar</a></li>
                <li><a href="radio.html">Radio</a></li>
                <li><a href="range-slider.html">Range Slider</a></li>
                <li><a href="searchbar.html">Searchbar</a></li>
                <li><a href="sheet-modal.html">Sheet Modal</a></li>
                <li><a href="smart-select.html">Smart Select</a></li>
                <li><a href="sortable.html">Sortable</a></li>
                <li><a href="statusbar.html">Statusbar</a></li>
                <li><a href="stepper.html">Stepper</a></li>
                <li><a href="subnavbar.html">Subnavbar</a></li>
                <li><a href="swiper.html">Swiper</a></li>
                <li><a href="swipeout.html">Swipeout</a></li>
                <li><a href="tabs.html">Tabs</a></li>
                <li><a href="toggle.html">Toggle</a></li>
                <li><a href="toolbar-tabbar.html">Toolbar / Tabbar</a></li>
                <li><a href="view.html">View</a></li>
                <li><a href="virtual-list.html">Virtual List</a></li>
              </ul>
            </li>
          </ul>
        </div>
        <div class="docs-content">
          <div class="improve-docs-link"><a href="https://github.com/gzxishan/framework7-websitev3/edit/master/src/pug/undefined" target="_blank">Improve this Doc</a></div>
          <h1>Swipeout Vue Component</h1>
          <ul class="docs-index"></ul>
          <p>Swipeout List is not a separate component, but just a particular case of using <a href="list-view.html">&lt;f7-list&gt;</a>, <a href="list-item.html">&lt;f7-list-item swipeout&gt;</a> Vue components and additional Swipeout components.</p>
          <p>Swipeout Vue component represents Framework7's <a href="../docs/swipeout.html">Swipeout</a> component.</p>
          <h2>Swipeout Components</h2>
          <p>There are following components included:</p>
          <ul>
            <li><code><b>f7-swipeout-actions</b></code> - wrapper for swipeout buttons</li>
            <li><code><b>f7-swipeout-button</b></code> - single swipeout button</li>
          </ul>
          <h2>Swipeout Properties</h2>
          <table class="params-table">
            <thead>
              <tr>
                <th>Prop</th>
                <th>Type</th>
                <th>Default</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th colspan="4">&lt;f7-swipeout-actions&gt; Properties</th>
              </tr>
              <tr>
                <td>side</td>
                <td>string</td>
                <td>right</td>
                <td>Swipeout actions side</td>
              </tr>
              <tr>
                <td>right</td>
                <td>boolean</td>
                <td></td>
                <td>Shortcut for <code>side="right"</code> prop</td>
              </tr>
              <tr>
                <td>left</td>
                <td>boolean</td>
                <td></td>
                <td>Shortcut for <code>side="left"</code> prop</td>
              </tr>
              <tr>
                <th colspan="4">&lt;f7-swipeout-button&gt; Properties</th>
              </tr>
              <tr>
                <td>delete</td>
                <td>boolean</td>
                <td>false</td>
                <td>Will automatically delete swipeout list item on click</td>
              </tr>
              <tr>
                <td>close</td>
                <td>boolean</td>
                <td>false</td>
                <td>Will automatically close swipeout list item on click</td>
              </tr>
              <tr>
                <td>overswipe</td>
                <td>boolean</td>
                <td>false</td>
                <td>Will be triggered click automatically if you swipe actions too much - <a href="../docs/swipeout.html#overswipe">overswipe</a></td>
              </tr>
              <tr>
                <td>text</td>
                <td>string</td>
                <td></td>
                <td>Swipeout button text label</td>
              </tr>
              <tr>
                <td>confirmText</td>
                <td>string</td>
                <td></td>
                <td>This text will be shown in dialog where user must agree before item delete</td>
              </tr>
            </tbody>
          </table>
          <h2>Swipeout Events</h2>
          <table class="events-table">
            <thead>
              <tr>
                <th>Event</th>
                <th>Description</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th colspan="2">&lt;f7-swipeout-button&gt; events</th>
              </tr>
              <tr>
                <td>click</td>
                <td>Event will be triggered on swipeout button click</td>
              </tr>
              <tr>
                <th colspan="2">&lt;f7-list-item&gt; events<br><small>The following events will be available on &lt;f7-list-item&gt; with <code>swipeout</code> enabled</small></th>
              </tr>
              <tr>
                <td>swipeout</td>
                <td>Event will be triggered while you move swipeout element. <b>event.detail.progress</b> contains current opened progress percentage</td>
              </tr>
              <tr>
                <td>swipeout:open</td>
                <td>Event will be triggered when swipeout element starts its opening animation</td>
              </tr>
              <tr>
                <td>swipeout:opened</td>
                <td>Event will be triggered after swipeout element completes its opening animation</td>
              </tr>
              <tr>
                <td>swipeout:close</td>
                <td>Event will be triggered when swipeout element starts its closing animation</td>
              </tr>
              <tr>
                <td>swipeout:closed</td>
                <td>Event will be triggered after swipeout element completes its closing animation</td>
              </tr>
              <tr>
                <td>swipeout:delete</td>
                <td>Event will be triggered after swipeout element starts its delete animation</td>
              </tr>
              <tr>
                <td>swipeout:deleted</td>
                <td>Event will be triggered after swipeout element completes its delete animation right before it will be removed from DOM</td>
              </tr>
              <tr>
                <td>swipeout:overswipeenter</td>
                <td>Event will be triggered when overswipe enabled</td>
              </tr>
              <tr>
                <td>swipeout:overswipeexit</td>
                <td>Event will be triggered when overswipe disabled</td>
              </tr>
            </tbody>
          </table>
          <div class="with-device">
            <h2 data-device-preview="../docs-demos/vue/swipeout.html">Examples</h2><pre><code class="html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-page</span> <span class="token attr-name"><span class="token namespace">@page:</span>init</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>onPageInit<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-navbar</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Swipeout<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-navbar</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-block-title</span><span class="token punctuation">></span></span>Swipe to delete with confirm modal<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-block-title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-item</span>
        <span class="token attr-name">swipeout</span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Swipe left on me please<span class="token punctuation">"</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">right</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">delete</span> <span class="token attr-name">confirm-text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Are you sure you want to delete this item?<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-item</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-item</span>
        <span class="token attr-name">swipeout</span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Swipe left on me too<span class="token punctuation">"</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">right</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">delete</span> <span class="token attr-name">confirm-text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Are you sure you want to delete this item?<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-item</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-item</span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>I am not removable<span class="token punctuation">"</span></span>
      <span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-item</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-block-title</span><span class="token punctuation">></span></span>Swipe to delete without confirm<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-block-title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-item</span>
        <span class="token attr-name">swipeout</span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Swipe left on me please<span class="token punctuation">"</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">right</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">delete</span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-item</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-item</span>
        <span class="token attr-name">swipeout</span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Swipe left on me too<span class="token punctuation">"</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">right</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">delete</span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-item</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-item</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>I am not removable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-item</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-block-title</span><span class="token punctuation">></span></span>Swipe for actions<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-block-title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-item</span>
        <span class="token attr-name">swipeout</span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Swipe left on me please<span class="token punctuation">"</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">right</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>more<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>More<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">delete</span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-item</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-item</span>
        <span class="token attr-name">swipeout</span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Swipe left on me too<span class="token punctuation">"</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">right</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>more<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>More<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">delete</span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-item</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-item</span>
        <span class="token attr-name">swipeout</span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>You can't delete me<span class="token punctuation">"</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">right</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>more<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>More<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-item</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-block-title</span><span class="token punctuation">></span></span>With callback on remove<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-block-title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-item</span>
        <span class="token attr-name">swipeout</span>
        <span class="token attr-name"><span class="token namespace">@swipeout:</span>deleted</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>onDeleted<span class="token punctuation">"</span></span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Swipe left on me please<span class="token punctuation">"</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">right</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">delete</span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-item</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-item</span>
        <span class="token attr-name">swipeout</span>
        <span class="token attr-name"><span class="token namespace">@swipeout:</span>deleted</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>onDeleted<span class="token punctuation">"</span></span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Swipe left on me too<span class="token punctuation">"</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">right</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">delete</span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-item</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-item</span> <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>I am not removable<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-item</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-block-title</span><span class="token punctuation">></span></span>With actions on left side (swipe to right)<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-block-title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-item</span>
        <span class="token attr-name">swipeout</span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Swipe right on me please<span class="token punctuation">"</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">left</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>green<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>reply<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Reply<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blue<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>forward<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Forward<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-item</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-item</span>
        <span class="token attr-name">swipeout</span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Swipe right on me too<span class="token punctuation">"</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">left</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>green<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>reply<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Reply<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blue<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>forward<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Forward<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-item</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list</span><span class="token punctuation">></span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-block-title</span><span class="token punctuation">></span></span>On both sides with overswipes<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-block-title</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list</span> <span class="token attr-name">media-list</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-item</span>
        <span class="token attr-name">swipeout</span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Facebook<span class="token punctuation">"</span></span>
        <span class="token attr-name">after</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>17:14<span class="token punctuation">"</span></span>
        <span class="token attr-name">subtitle</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>New messages from John Doe<span class="token punctuation">"</span></span>
        <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.<span class="token punctuation">"</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">left</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">overswipe</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>green<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>reply<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Reply<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blue<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>forward<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Forward<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">right</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>more<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>More<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>orange<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mark<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">delete</span> <span class="token attr-name">overswipe</span> <span class="token attr-name">confirm-text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Are you sure you want to delete this item?<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-item</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-item</span>
        <span class="token attr-name">swipeout</span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>John Doe (via Twitter)<span class="token punctuation">"</span></span>
        <span class="token attr-name">after</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>17:11<span class="token punctuation">"</span></span>
        <span class="token attr-name">subtitle</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>John Doe (@_johndoe) mentioned you on Twitter!<span class="token punctuation">"</span></span>
        <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.<span class="token punctuation">"</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">left</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">overswipe</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>green<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>reply<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Reply<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blue<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>forward<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Forward<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">right</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>more<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>More<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>orange<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mark<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">delete</span> <span class="token attr-name">overswipe</span> <span class="token attr-name">confirm-text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Are you sure you want to delete this item?<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-item</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-item</span>
        <span class="token attr-name">swipeout</span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Facebook<span class="token punctuation">"</span></span>
        <span class="token attr-name">after</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>16:48<span class="token punctuation">"</span></span>
        <span class="token attr-name">subtitle</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>New messages from John Doe<span class="token punctuation">"</span></span>
        <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.<span class="token punctuation">"</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">left</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">overswipe</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>green<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>reply<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Reply<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blue<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>forward<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Forward<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">right</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>more<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>More<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>orange<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mark<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">delete</span> <span class="token attr-name">overswipe</span> <span class="token attr-name">confirm-text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Are you sure you want to delete this item?<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-item</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-list-item</span>
        <span class="token attr-name">swipeout</span>
        <span class="token attr-name">title</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>John Doe (via Twitter)<span class="token punctuation">"</span></span>
        <span class="token attr-name">after</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>15:32<span class="token punctuation">"</span></span>
        <span class="token attr-name">subtitle</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>John Doe (@_johndoe) mentioned you on Twitter!<span class="token punctuation">"</span></span>
        <span class="token attr-name">text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.<span class="token punctuation">"</span></span>
      <span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">left</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">overswipe</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>green<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>reply<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Reply<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>blue<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>forward<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Forward<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-actions</span> <span class="token attr-name">right</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>more<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>More<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">color</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>orange<span class="token punctuation">"</span></span> <span class="token attr-name">@click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mark<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Mark<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>f7-swipeout-button</span> <span class="token attr-name">delete</span> <span class="token attr-name">overswipe</span> <span class="token attr-name">confirm-text</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Are you sure you want to delete this item?<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Delete<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-button</span><span class="token punctuation">></span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-swipeout-actions</span><span class="token punctuation">></span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list-item</span><span class="token punctuation">></span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-list</span><span class="token punctuation">></span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>f7-page</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">></span></span><span class="token script"><span class="token language-javascript">
  <span class="token keyword-block">export</span> <span class="token keyword-block">default</span> <span class="token punctuation">{</span>
    methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
      <span class="token function">more</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token context">self</span> <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">;</span>
        <span class="token context">self</span><span class="token punctuation">.</span>actions<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function">mark</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">.</span>$f7<span class="token punctuation">;</span>
        app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Mark'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function">reply</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">.</span>$f7<span class="token punctuation">;</span>
        app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Reply'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function">forward</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">.</span>$f7<span class="token punctuation">;</span>
        app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Forward'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function">onDeleted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">.</span>$f7<span class="token punctuation">;</span>
        app<span class="token punctuation">.</span>dialog<span class="token punctuation">.</span><span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Thanks, item removed!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
      <span class="token function">onPageInit</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token context">self</span> <span class="token operator">=</span> <span class="token context">this</span><span class="token punctuation">;</span>
        <span class="token keyword">const</span> app <span class="token operator">=</span> <span class="token context">self</span><span class="token punctuation">.</span>$f7<span class="token punctuation">;</span>
        <span class="token context">self</span><span class="token punctuation">.</span>actions <span class="token operator">=</span> app<span class="token punctuation">.</span>actions<span class="token punctuation">.</span><span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          buttons<span class="token punctuation">:</span> <span class="token punctuation">[</span>
            <span class="token punctuation">[</span>
              <span class="token punctuation">{</span>
                text<span class="token punctuation">:</span> <span class="token string">'Here comes some optional description or warning for actions below'</span><span class="token punctuation">,</span>
                label<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span>
                text<span class="token punctuation">:</span> <span class="token string">'Action 1'</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
              <span class="token punctuation">{</span>
                text<span class="token punctuation">:</span> <span class="token string">'Action 2'</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
            <span class="token punctuation">[</span>
              <span class="token punctuation">{</span>
                text<span class="token punctuation">:</span> <span class="token string">'Cancel'</span><span class="token punctuation">,</span>
                bold<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
              <span class="token punctuation">}</span><span class="token punctuation">,</span>
            <span class="token punctuation">]</span><span class="token punctuation">,</span>
          <span class="token punctuation">]</span><span class="token punctuation">,</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">></span></span></pre></code>
          </div>
        </div>
      </div>
    </main>
    <script src="/framework7-v3/js/jquery-1.11.0.min.js"></script>
    <script src="/framework7-v3/js/main.js"></script>
  </body>
</html>